import { Input } from "antd";
import React from "react";
import { useOutletContext, useSearchParams } from "react-router-dom";

type OutletType = [number, React.Dispatch<React.SetStateAction<number>>]

const Child = () => {
  const [count, setCount] = useOutletContext<OutletType>();
  const [searchParams, setSearchParams] = useSearchParams();
  console.log("🚀 ~ file: child.tsx ~ line 10 ~ Child ~ searchParams", searchParams)

  const handleSubmit = (event: any) => {
    event.preventDefault();
    setSearchParams({
      name: event.target.value
    })
  }

  const onClick = () => {
    setCount((n: number) => n + 1)
  }

  return (
    <div>
      <div>Child</div>
      <div>
        <button onClick={onClick}>child deal count</button>
        <div>
          Child count {count}
        </div>

        <Input onChange={handleSubmit}></Input>
      </div>
    </div>
  )
}

export default Child